<template>
  <div class="m-home">
    <!-- 顶部导航 -->
    <yd-navbar slot="navbar" height=".88rem" bgcolor="#fff" color="#999" fontsize=".3rem" :fixed="true" title="美肤_PARK">
      <router-link to="/search" slot="right">
        <yd-icon name="search" size=".3rem" color="#999"></yd-icon>
      </router-link>
    </yd-navbar>

    <!-- 内容区域 -->
    <div class="m-home-content">
      <!-- banner -->
      <yd-slider autoplay="3000">
        <yd-slider-item v-for="(banner, index) in bannerList" :key="index" @click.native="onToLink(banner)">
          <a href="javascript:;">
            <img v-lazy="banner.path + '/' + banner.imgName">
          </a>
        </yd-slider-item>
      </yd-slider>

      <!-- 楼层模版 -->
      <home-floor></home-floor>
    </div>
  </div>
</template>

<script>
  /* 
    type描述：
      goodsInfo  进入商品详情    
      goodsList  进入商品列表   
      channel 则返回channelId 读取楼层数据 
      store   进入店铺        
      link     进入链接       
      keyWords 商品关键字搜索
      storeSearch 搜索店铺
      brandSearch 品牌关键字搜索   跳转类型 banner也加下这些判断跳转
  */
  import { apiIndexBanner } from 'js/api'
  import { mapGetters, mapMutations } from 'vuex'
  import HomeFloor from './floor'

  export default {
    data() {
      return {
        topNavIcon: [],
        bannerList: [],
        floorList: [],
        currentPage: 1
      }
    },
    created() {
      this.initPage()
    },
    methods: {
      ...mapMutations(['setHeadLineList']),
      // 初始化
      initPage() {
        this.fetchBanner()
      },
      // 请求banner数据
      fetchBanner() {
        apiIndexBanner().then(data => {
          this.bannerList = data.banners || []
        })
      },
      // 跳转
      onToLink(result) {
        switch (result.type) {
          case 'goodsInfo': // 进入商品详情
            this.$router.push(`/goods/${result.value}`)
            break
          case 'goodsList': // 进入商品列表
            this.$router.push(`/goodslist?keyword=${encodeURIComponent(result.value)}`)
            break
          case 'channel': // 频道
            this.$router.push(`/channel/${result.value}`)
            break
          case 'link': // 进入链接
            window.location.href = result.value
            break
          case 'typeList': // 分类
            this.$router.push('/classify')
            break
        }
      }
    },
    computed: {
      ...mapGetters(['token', 'headLineAllList'])
    },
    components: {
      HomeFloor
    }
  }
</script>

<style lang="scss">
  @import '../../scss/_flex.scss';
  .m-home {
    margin-top: 0.9rem;
    .yd-grids-5 {
      padding-bottom: .3rem;
    }
  }
  .m-home-srh {
    position: fixed;
    top: .88rem;
    height: .7rem;
    left: 0;
    right: 0;
    background: #f00385;
    padding: 0 .3rem;
    z-index: 3;
    .input {
      position: relative;
      height: .5rem;
      line-height: .5rem;
      margin-top: .1rem;
      border-radius: .5rem;
      background: #fff;
      overflow: hidden;
      text-align: center;
      .yd-icon-search {
        position: absolute;
        left: 30%;
        top: .03rem;
      }
      input {
        position: absolute;
        left: 36%;
        width: 60%;
        height: 100%;
        border: none;
      }
    }
  }
  .m-home-content {
    padding: 0rem;
    .yd-slider {
      height: 4rem;
      margin-top: .2rem;
    }
  }
  .m-home-headline {
    @include flex(start);
    margin: .2rem 0;
    background: #fff;
    .board {
      width: 1.9rem;
      height: .44rem;
      line-height: .44rem;
      margin-left: .1rem;
      margin-right: .3rem;
      text-align: center;
      font-size: .24rem;
      color: #fff;
      border-radius: 4px;
      background: #f00384;
    }
  }
</style>